<template>
  <div class="tabs_content" :class="$store.state.isCollapse?'position-collapse-left':'position-left'">
    <div class="tab_box">
      <el-tabs :value="currentTab" type="card" @tab-click="goTab" @tab-remove="removeTab">
        <el-tab-pane label="首页" name="/"></el-tab-pane>
        <el-tab-pane v-for="(item, index) in tabList" :label="item.name" :name="item.url" closable></el-tab-pane>
      </el-tabs>
    </div>
    <div class="tab_action">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          更多操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
          <el-dropdown-item command="left">关闭左侧</el-dropdown-item>
          <el-dropdown-item command="right">关闭右侧</el-dropdown-item>
          <el-dropdown-item command="all">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {};
    },
    computed: {
      currentTab() {
        return this.$store.state.currentTab
      },
      tabList() {
        return this.$store.state.tabList
      },
    },
    watch: {},
    conputed: {},
    methods: {
      goTab(target) {
        // 点击单个标签
        this.$router.push({
          path: target.paneName
        });
      },
      removeTab(targetName) {
        // 删除单个标签
        this.$store.state.tabList.some((item, index) => {
          if (item.url === targetName) {
            // 获取要删除的index
            
            this.$store.state.tabList.splice(index, 1) // 删除标签
            this.$store.state.cacheTab.splice(index, 1) // 删除缓存
            
            if(this.$store.state.currentTab === item.url){
              // 删除的是当前选中的标签，则切换到上一标签页
              if (this.$store.state.tabList.length > 0) {
                this.$router.push({
                  path: this.$store.state.tabList[this.$store.state.tabList.length - 1].url
                }) // 跳转上一标签路径
              } else {
                this.$router.push({
                  path: "/"
                })
              }
            }
            
          }
          return item.url === targetName
        })
      },
      handleCommand(command) {
        if (this.$route.path !== "/") {
          // 当前不是首页
          this.$store.state.tabList.some((item, index) => {
            if (item.url === this.$store.state.currentTab) {
              
              if (command === "other") {
                // 点击关闭其他
                this.$store.state.tabList = [this.$store.state.tabList[index]]
                this.$store.state.cacheTab = [this.$store.state.cacheTab[index]]
              } else if (command === "left") {
                this.$store.state.tabList = this.$store.state.tabList.splice(index, this.$store.state.tabList.length)
                this.$store.state.cacheTab = this.$store.state.cacheTab.splice(index, this.$store.state.cacheTab.length)
              } else if (command === "right") {
                this.$store.state.tabList.splice(index + 1, this.$store.state.tabList.length)
                this.$store.state.cacheTab.splice(index + 1, this.$store.state.cacheTab.length)
              } else if (command === "all") {
                this.$store.state.tabList = []
                this.$store.state.cacheTab = []
                this.$store.state.currentTab = "/"
                this.$router.push({
                  path: "/"
                })
              }
              
            }
            return item.url === this.$store.state.currentTab
          })
        } else {
          // 当前是首页
          this.$store.state.tabList = []
          this.$store.state.cacheTab = []
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .tabs_content {
    position: absolute;
    height: 41px;
    top: 64px;
    right: 0;
    z-index: 1020;
    transition: 0.5s;
    padding: 0 10px;
    border-bottom: 1px solid #E4E7ED;

    .tab_box {
      margin: 0;
      display: inline-block;
      width: calc(100% - 120px);

      /deep/ .el-tabs__header {
        border: none;
        .is-active{
          background-color: #1890ff;
          color: #fff;
        }
      }

      /deep/ .el-tabs__nav {
        border: 1px solid #E4E7ED;
      }
    }

    .tab_action {
      float: right;
      display: inline-block;
      height: 41px;
      line-height: 41px;
      width: 100px;
    }
  }

  .position-left {
    left: 201px;
  }

  .position-collapse-left {
    left: 65px;
  }
</style>
